<script setup>
import { reactive, ref } from 'vue'

const dataFormRef = ref()
const datetimePickerRef = ref()
const data = {
	pic: '',
	nickname: '',
	gender: null,
	birthday: null
}

const dataForm = reactive({ ...data })

const rules = {
	
}

const setList = [
	{
		title: "隐私协议",
		url: "/minePages/help",
	},
	{
		title: "发布者协议",
		url: "/minePages/content",
	},
	{
		title: "接单者协议",
		url: "/minePages/content",
	},
	{
		title: "猿军令会员协议",
		url: "/minePages/content",
	},
	{
		title: "个人信息收集清单",
		url: "/minePages/version",
	}
]

const goBack = () => {
	const pages = getCurrentPages()
	if (pages && pages.length > 0) {
		const firstPage = pages[0]
		if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
			uni.reLaunch({
				url: '/pages/index/index'
			})
		} else {
			uni.navigateBack({
				delta: 1
			})
		}
	} else {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}
}
	
const dateSelectHandle = () => {
	datetimePickerRef.value.open()
	uni.hideKeyboard()
}

const dateConfirmHandle = (e) => {
	console.log(e)
	console.log(dataForm.birthday)
}
</script>

<template>
	<view class="template-set">
		
		<!-- 顶部自定义导航 -->
		<xb-nav-bar go>
			<view slot="back" class='tn-custom-nav-bar__back'>
				<navigator open-type="navigateBack" hover-class="none">
					<text class='icon tn-icon-left-arrow'></text>
				</navigator>
			</view>
		</xb-nav-bar>
  
    <view class="tn-margin-top" :style="{paddingTop: 91 + 'px'}">
      
      <navigator class="tn-flex tn-flex-row-between tn-strip-bottom tn-padding" hover-class="none" url="/pages-member/profile/profile">
      	<view class="justify-content-item">
      	  <view class="tn-text-bold tn-text">
      	    账号安全
      	  </view>
      	  <view class="tn-color-gray tn-padding-top-xs">
      	    修改用户昵称、密码
      	  </view>
      	</view>
      	<view class="justify-content-item tn-text-lg tn-color-grey">
      	  <view class="tn-icon-right tn-padding-top"></view>
      	</view>
      </navigator>
			
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs" v-for="(item, index) in setList" :key="index" @click="tn(item.url)">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text">
            {{ item.title }}
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey">
          <view class="tn-icon-right"></view>
        </view>
      </view>
      
      <!-- 悬浮按钮-->
      <view class="tn-flex  tn-footerfixed">
        <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="tn('/minePages/login')">
          <button class="tn-btn-class tn-btn tn-round tn-shadow-blur tn-text-bold tn-cool-bg-color-15"
          style="padding:20px 0;font-size:14px;height:33px;width:60%" form-type aria-disabled="false" hover-class="tn-hover">
          	<text class="tn-color-white">退出登录</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
/* 胶囊*/
.tn-custom-nav-bar__back {
	width: 60%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 1000rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
	font-size: 18px;
	
	.icon {
		display: block;
		flex: 1;
		margin: auto;
		text-align: center;
	}
	
}

/* 间隔线 start*/
.tn-strip-bottom-min {
	width: 100%;
	border-bottom: 1rpx solid #F8F9FB;
}

.tn-strip-bottom {
 width: 100%;
 border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/

.tn-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	overflow: visible;
	-webkit-transform: translate(0rpx, 0rpx);
					transform: translate(0rpx, 0rpx);
	border-radius: 12rpx;
	margin: 0;
}
	 
.tn-footerfixed {
	position: fixed;
	width: 100%;
	bottom: calc(100rpx + env(safe-area-inset-bottom));
	z-index: 1024;
	box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
	
}
</style>
